<template>
  <div class="content-wrap content-container" v-loading="loading">
    <!-- 搜索区域 -->
    <el-form class="search-wrap" v-model="searchFormData">
      <el-form-item class="search-wrap-item" label="标题关键字：" prop="projectTitle">
        <el-input width="160px" placeholder="请输入标题关键字" v-model="searchFormData.projectTitle" clearable
          @keyup.enter="getAllRequirements"></el-input>
      </el-form-item>
      <el-form-item class="search-wrap-item" label="归属人：" prop="userName">
        <el-input min-width="360px" placeholder="请输入归属人" v-model="searchFormData.userName" clearable
          @keyup.enter="getAllRequirements"></el-input>
      </el-form-item>
      <el-form-item class="search-wrap-item" label="时间：" prop="time">
        <el-date-picker style="width: 240px" type="daterange" unlink-panels range-separator="-" start-placeholder="开始时间"
          end-placeholder="结束时间" :value-on-clear="null" v-model="searchFormData.time" format="YYYY/MM/DD"
          value-format="YYYY-MM-DD" @change="getAllRequirements" />
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="createRequirementClick">创建需求</el-button>
      </el-form-item> -->
    </el-form>

    <!-- [我创建的需求]列表区域 -->
    <div class="card-layout-box" id="cardLayoutBox">
      <div class="card-not-requirement" v-if="allRequirements.length === 0">暂无数据</div>
      <!-- 未生效 -->
      <div class="card-box" v-if="allEnterReuirements.length !== 0">
        <!-- 分类 -->
        <div class="card-header-box">
          <el-tag :style="{ backgroundColor: enterStatus(1)?.bgColor }">未生效</el-tag> - {{ allEnterReuirements.length }}
        </div>
        <!-- 需求列表 -->
        <div class="card-list-box">
          <ul class="card-list">
            <li class="card-list-item" v-for="item in allEnterReuirements" :key="item.ID"
              :class="{ 'red-bj': item.isOutTime === '是' }">
              <div class="card-list-left">
                <!-- 需求类别 -->
                <div class="card-list-type">
                  <span>
                    <el-icon :style="{ color: taskTypeContent(item.taskType).color }" :size="14">
                      <Flag />
                    </el-icon>
                    {{ taskTypeContent(item.taskType).text }}
                  </span>
                  <!-- <span>
                    <el-icon :style="{ color: isTsContent(item.isTs).color }" :size="15"><Flag /></el-icon>
                    {{ isTsContent(item.isTs).text }}
                  </span> -->
                </div>
                <!-- 需求标题 -->
                <div class="card-header-title-box" @click="handleRowClick(item.ID)">
                  <b>{{ item.requirementName }}</b>
                </div>
                <!-- 任务附加信息 -->
                <div class="card-list">
                  <!-- 审核人：requirementAuditName -->
                  <div class="item-status" v-if="item.requirementAuditName">
                    <span>审核人：{{ item.requirementAuditName }}&nbsp;&nbsp;</span>
                    <span :style="{ color: enterStatus(item.itemRequirementIsEnter).bgColor }">{{
                      enterStatus(item.itemRequirementIsEnter).text }}</span>
                  </div>
                  <!-- 技术负责人：itemRequirementIsEnter -->
                  <div class="card-list-small-item boss-name" v-if="item.itemRequirementIsEnter === 3">
                    <span style="color: #F56C6C;">请选择技术负责人：</span>
                    <el-dropdown style="overflow-y: auto;" :hide-on-click="false" max-height="300px" placement="bottom"
                      @command="handleReviewCommand">
                      <span class="el-dropdown-link">
                        <el-icon class="el-icon--right" color="#f56c6c">
                          <ArrowDownBold />
                        </el-icon>
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item v-for="(review, index) in reviewNameOptions" :key="index"
                            :command="{ itemRequirementId: item.ID, nickName: review.nickName, uuid: review.uuid }">{{
                            review.nickName }}</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                  <div class="card-list-small-item"></div>
                </div>
                <div class="card-list-small-item begin-time">
                  <el-icon>
                    <Clock style="position: absolute;left: 0;top:2px;" />
                  </el-icon>
                  {{ timeToData(item.beginTime) }} - {{ timeToData(item.endTime) }}
                </div>
              </div>
              <!-- 操作 -->
              <div class="operate-box">
                <el-dropdown :hide-on-click="false" placement="bottom" @command="handleCommand">
                  <!-- 下拉图标 -->
                  <span class="el-dropdown-link">
                    <el-icon class="el-icon--right" color="#409EFF">
                      <MoreFilled />
                    </el-icon>
                  </span>
                  <!-- 操作：itemRequirementIsEnter：1-待审核/催他/关闭；2-未通过/修改/审核记录/关闭；3-已通过/审核记录/关闭 -->
                  <template #dropdown>
                    <el-dropdown-menu>
                      <!-- 催他 -->
                      <el-dropdown-item v-if="item.itemRequirementIsEnter == 1"
                        :command="{ type: 1, command: '催他', id: item.ID, data: item }">催他</el-dropdown-item>
                      <!-- <el-dropdown-item v-if="item.itemRequirementIsEnter == 2 || item.itemRequirementIsEnter == 3 || item.requirementAuditName == ''" :command="{ type: 2, command: '查看原因', id: item.ID }">查看原因</el-dropdown-item> -->
                      <!-- 修改 -->
                      <el-dropdown-item v-if="item.itemRequirementIsEnter == 2"
                        :command="{ type: 2, command: '修改', id: item.ID, data: item }">修改</el-dropdown-item>
                      <!-- 修改名称 -->
                      <el-dropdown-item
                        :command="{ type: 4, command: '修改名称', id: item.ID, data: item }">修改名称</el-dropdown-item>
                      <!-- 审核记录 -->
                      <el-dropdown-item v-if="item.requirementAuditName !== '' && item.itemRequirementIsEnter !== 1"
                        :command="{ type: 3, command: '审核记录', id: item.ID, data: item }">审核记录</el-dropdown-item>
                      <!-- 未分配技术负责人 -->
                      <!-- <el-dropdown-item v-if="item.requirementAuditName !== ''" :command="{ type: 0, command: '关闭', id: item.ID, data: item }">关闭</el-dropdown-item> -->
                      <el-dropdown-item
                        :command="{ type: 0, command: '关闭', id: item.ID, data: item }">关闭</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- 已审核-分类 -->
      <div v-if="allFatherRequirements.length !== 0" class="card-box" v-for="(list, index) in fatherRequirements"
        :key="index">
        <!--        <div class="card-header-box" :style="{ backgroundColor: fatherStatus(list.status)?.bgColor }">-->
        <!--          {{ fatherStatus(list.status).text }}:{{ list.total }}-->
        <!--        </div>-->
        <div class="card-header-box">
          <el-tag :style="{ backgroundColor: fatherStatus(list.status)?.bgColor }">{{ fatherStatus(list.status).text
            }}</el-tag> - {{ list.total }}
        </div>
        <!-- 需求列表 -->
        <div class="card-list-box" :ref="(el:any) => setListContainerRef(el, list.status)">
          <ul class="card-list">
            <li class="card-list-item" v-for="item in list.requirements" :key="item.ID"
              :class="{ 'red-bj': item.isOutTime === '是' }">
              <div class="card-list-left">
                <!-- 需求类别 -->
                <div class="card-list-type">
                  <span>
                    <el-icon :style="{ color: taskTypeContent(item.taskType).color }" :size="14">
                      <Flag />
                    </el-icon>
                    {{ taskTypeContent(item.taskType).text }}
                  </span>
                  <!-- <span>
                    <el-icon :style="{ color: isTsContent(item.isTs).color }" :size="15"><Flag /></el-icon>
                    {{ isTsContent(item.isTs).text }}
                  </span> -->
                </div>
                <!-- 需求标题 -->
                <div class="card-header-title-box" @click="handleRowClick(item.ID)"
                  :class="{ 'card-finished': item.requirementFatherStatus === 9 }">
                  <b>{{ item.requirementName }}</b>
                </div>
                <!-- 附加信息 -->
                <!-- 任务附加信息 -->
                <div class="card-list">
                  <div class="card-list-small-item boss-name" v-if="item.requirementAuditName">审核人：{{
                    item.requirementAuditName }}</div>
                  <div class="card-list-small-item boss-name" v-if="item.requirementBossName">技术负责人：{{
                    item.requirementBossName == "" ? "无" :
                      item.requirementBossName }}</div>
                  <div class="card-list-small-item boss-name test-list" v-if="item.requirementRelevances">参与人：{{
                    item.requirementRelevances }}</div>
                </div>
                <div class="card-list-small-item begin-time">
                  <el-icon>
                    <Clock style="position: absolute;left: 0;top:2px;" />
                  </el-icon>
                  {{ timeToData(item.beginTime) }} - <span :class="{ 'red-text': item.isOutTime === '是' }">{{
                    timeToData(item.endTime) }}</span>
                </div>
                <!-- 延期图标 -->
                <div class="icon-img" v-if="item.isOutTime === '是'">
                  <img src="../../../assets/images/icon-delay.png" style="width: 50px;" />
                </div>
              </div>
              <!-- 操作 -->
              <div class="operate-box">
                <el-dropdown :hide-on-click="false" placement="bottom" @command="handleCommand">
                  <span class="el-dropdown-link">
                    <el-icon class="el-icon--right" color="#409EFF">
                      <MoreFilled />
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <!-- 撤回需求 -->
                    <el-dropdown-item v-if="item.requirementFatherStatus == 9"
                      :command="{ requirement: item, operate: 9, id: item.ID, data: item }">
                      {{ fatherStatus(item.requirementFatherStatus).operate }}
                    </el-dropdown-item>

                    <!-- 修改名称 -->
                    <el-dropdown-item
                      :command="{ type: 4, command: '修改名称', id: item.ID, data: item }">修改名称</el-dropdown-item>

                    <!-- 关闭需求 -->
                    <el-dropdown-menu v-if="item.requirementFatherStatus !== 9">
                      <el-dropdown-item
                        :command="{ type: 0, command: '关闭', id: item.ID, data: item }">关闭</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </li>
          </ul>
          <div class="list-footer" v-if="statusPage[list.status]?.finished">没有更多了</div>
          <div class="list-footer" v-else-if="statusPage[list.status]?.loading">加载中...</div>
        </div>
      </div>
    </div>

    <!-- 需求详情弹窗 -->
    <el-dialog v-if="dialogInfoVisible" style="width: 1200px;" :close-on-click-modal="false" v-model="dialogInfoVisible"
      @close="handleCloseDiglog" @closed="handleCloseDiglog" top="8vh">
      <CommonRequirementInfoVue :isRequirementID="isRequirementID" :clearData="clearData" :isComment="true">
      </CommonRequirementInfoVue>
    </el-dialog>

    <!-- 查看审核记录弹窗 -->
    <el-dialog style="width: 600px;" title="审核记录" :close-on-click-modal="false" v-model="dialogRecordVisible"
      @close="handleCloseDiglog">
      <el-timeline style="max-width: 560px; max-height: 500px; padding: 20px; overflow-y: auto;">
        <el-timeline-item v-for="(record, index) in recordData" :key="index"
          :timestamp="`审核时间：${tableTimeDateMsg(record.reviewDate)}`"
          :color="record.isEnter == 1 ? '#F56C6C' : record.isEnter == 2 ? '#E6A23C' : record.isEnter == 3 ? '#67C23A' : '#F56C6C'"
          placement="top">
          <el-card>
            <div class="record-title">
              <p>
                <span style="font-weight: bold;">审核人：</span>
                <span>{{ record.reViewUserName }}</span>
              </p>
              <p>
                <span style="font-weight: bold;">审核结果：</span>
                <span :style="{ color: enterStatus(record.isEnter).bgColor }">{{ enterStatus(record.isEnter).content
                  }}</span>
              </p>
              <p>
                <span style="font-weight: bold;">评分：</span>
                <span>{{ record.reViewContentNumber }}</span>
              </p>
            </div>
            <!-- 评语 -->
            <div>
              <span style="font-weight: bold;">&nbsp;&nbsp;评语：</span>
              {{ record.reViewContent }}
            </div>
            <!-- 需求草稿文档下载 -->
            <div class="info-file-box" v-if="record.worldUrl !== ''">
              <p class="info-content-title"><span style="font-weight: bold;">需求草稿：</span></p>
              <ul class="info-file-ul">
                <li class="info-file-item" v-for="(item, index) in handleRecordFiles(record.worldUrl)" :key="index">
                  <el-icon :size="12">
                    <Document />
                  </el-icon>
                  <span style="font-size: 12px;">&nbsp;{{ item.fileName ? item.fileName : `未知.${item.type}` }}</span>
                  <el-icon class="info-file-icon" @click="handlePreviewDocument(item.url)">
                    <View />
                  </el-icon>
                  <el-icon class="info-file-icon" @click="handleDownloadFile(item, baseUrl)">
                    <Download />
                  </el-icon>
                </li>
              </ul>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>

    <!-- 修改需求弹窗 -->
    <el-dialog class="again-dialog" style="width: 1200px;max-height: 700px;overflow-y: auto;"
      :close-on-click-modal="false" v-model="dialogAgainVisible" title="修改需求" @close="handleColseAgain"
      @closed="handleColseAgain" @before-close="handleColseAgain">
      <el-form class="create-form" ref="ruleAgainFormRef" :rules="againRules" :model="againRequirementForm">
        <!-- 项目名称 -->
        <el-form-item label="项目名称：" required style="width: 50%" prop="projectId">
          <el-select v-model="againRequirementForm.projectId" filterable="true" placeholder="项目名称" fit-input-width
            clearable style="width: 200px" disabled>
            <el-option v-for="item in allProjectLists" :key="item.id" :label="item.projectName" :value="item.id" />
          </el-select>
          <!-- <el-icon
            class="add-icon"
            :size="24"
            @click="dialogAddProVisible = true"
            ><CirclePlus
          /></el-icon> -->
        </el-form-item>
        <!-- 需求类型 -->
        <el-form-item label="需求类型：" required style="width: 50%;" prop="projectType">
          <el-radio-group v-model="againRequirementForm.projectType">
            <el-radio-button style="margin-bottom: 5px;" v-for="item in allTypeLists" :key="item.id" :label="item.type"
              :value="item.id" />
          </el-radio-group>
        </el-form-item>
        <!-- 需求标题 -->
        <el-form-item label="需求标题：" required style="width: 50%" prop="projectTitle">
          <el-input v-model="againRequirementForm.projectTitle" placeholder="请输入需求标题" style="width: 400px"></el-input>
        </el-form-item>

        <!-- 预计上线时间-有时间限制 -->
        <!-- <el-form-item label="预计上线时间：" prop="onlineTime" style="width: 50%" required>
          <el-date-picker
            style="width: 180px"
            v-model="againRequirementForm.onlineTime"
            type="date"
            placeholder="请选择预计上线日期"
            :disabledDate="disabledDate"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item> -->
        <!-- 预计上线时间-无时间限制 -->
        <el-form-item label="预计上线时间：" prop="onlineTime" style="width: 50%" required>
          <el-date-picker style="width: 180px" v-model="againRequirementForm.onlineTime" type="date"
            placeholder="请选择预计上线日期" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
        </el-form-item>

        <!-- 需求详情 -->
        <el-form-item label="简述需求：" required style="width: 100%; margin-bottom: 20px;" prop="projectMsg">
          <div style="width: 100%;">
            <EditorVue v-if="dialogAgainVisible" style="width: calc(100% - 20px);" class="editor"
              :modelValue="againRequirementForm.projectMsg" @update:modelValue="updateModelValue" />
          </div>
        </el-form-item>

        <!-- 附件 -->
        <el-form-item label="&nbsp;&nbsp;附件：" class="file-box">
          <div v-if="(againRequirementForm.filePaths.length + filePaths.length) == 0">无</div>
          <el-tag style="cursor: pointer;margin-right: 5px;" v-model="againRequirementForm.filePaths"
            v-for="(tag, index) in againRequirementForm.filePaths" :key="index" closable="true" type="primary"
            @close="handleDelFile(tag.url)" @click="handleDownloadFile(tag, baseUrl)">
            {{ tag.fileName }}
          </el-tag>
        </el-form-item>

        <!-- 追加附件 -->
        <el-form-item class="upload-box" label="&nbsp;&nbsp;追加附件:">
          <div style="width: 100%;">
            <div style="width: 100%;">
              <el-button type="primary" size="small" plain @click="openModal = true">
                关联
              </el-button>

              <!-- <el-upload
                class="upload-demo"
                v-model:file-list="fileList"
                action=""
                multiple="true"
                :http-request="handleUpLoad"
                :on-success = "handleSuccess"
                :on-error="handleError"
                :on-remove = "handleRemove"
                >
                <el-button class="upload-btn" type="primary" plain size="small">上传</el-button>
              </el-upload> -->

              <UploadFilesVue :initConfig="initConfig" @updateFilePaths="handleUpdateFilePaths"
                :resetFiles="resetFiles">
              </UploadFilesVue>
            </div>

            <!-- 关联的文件 -->
            <div style="margin-top: 10px;width: 100%;display: flex;flex-direction: column;flex-wrap: wrap;">
              <el-tag style="margin-bottom: 5px;display: flex;justify-content: space-between;margin-right: 10px;"
                v-for="(file, index) in newAssFilesList" :key="index" closable :disable-transitions="false"
                @close="handleDelAssFile(file)">
                {{ handleFileName(file).fileName }}
              </el-tag>
            </div>
          </div>
        </el-form-item>

        <!-- 创建需求 -->
        <el-form-item class="create-button">
          <el-button type="primary" @click="handleColseAgain">取消</el-button>
          <el-button type="primary" id="againBtn" @click="handleAgainRequirement(ruleAgainFormRef)">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改需求名称弹窗 -->
    <el-dialog style="width: 500px;" title="修改需求名称" :close-on-click-modal="false" v-model="dialogEditNameVisible"
      @close="handleCloseEditNameDialog">
      <el-form ref="editNameFormRef" :model="editNameForm" :rules="editNameRules" label-width="100px">
        <el-form-item label="需求名称：" prop="requirementName" required>
          <el-input v-model="editNameForm.requirementName" placeholder="请输入需求名称" maxlength="100" show-word-limit></el-input>
        </el-form-item>
        <el-form-item>
          <div class="dialog-footer">
            <el-button @click="handleCloseEditNameDialog">取消</el-button>
            <el-button type="primary" @click="handleSubmitEditName">确定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 关闭/撤回原因 -->
    <el-dialog top="30vh" v-model="dialogReasonMsgVisible"
      :title="isRequirementData?.requirementFatherStatus == 9 ? '撤回原因：' : '关闭原因：'">
      <el-form>
        <el-form-item>
          <el-input type="textarea" rows="4" maxlength="200" show-word-limit v-model="reasonMsg"
            placeholder="请输入原因......">
          </el-input>
        </el-form-item>
        <el-form-item>
          <div class="dialog-footer">
            <el-button type="defalut" @click="handleCloseReasonMsgDialog">取消</el-button>
            <el-button type="primary" @click="handleSubmitReasonMsg">确定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 关联文件 -->
    <AssRequiremenFileVue v-model:isOpen="openModal" @add-files="handleAddFiles"></AssRequiremenFileVue>

    <!-- 添加项目名称对话框 -->
    <!-- <el-dialog
      id="dialogForm"
      style="width: 400px; margin-top: 200px"
      v-model="dialogAddProVisible"
      title="添加项目"
       :close-on-click-modal="false"
      :show-close="true"
      :before-close="handleBeforeCancel"
    >
      <el-input
        placeholder="请输入项目名称"
        v-model="newProjectName"
      ></el-input>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleAddProjectDialog">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog> -->
  </div>
</template>

<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { ref, onMounted, reactive, } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox, ElNotification, FormInstance } from "element-plus";
import { ElForm } from "element-plus";
import {
  putCloseRequirementStatus, GetCreateRequirement, PutUpdateBossName,
  GetUrgedRequriement, GetRequirementEnterMsg, PostRequirement, PostUpdateRequirementName,PostAgainRequirement, PutReturnCloseFatherRequirementStatus,
} from "@/api/newDemands/index";
import { postUploadFile } from "@/api/common/index";
import { timeToData, enterStatus, fatherStatus, tableTimeDateMsg, handleFileName, handleDownloadFile, isValidateEditor, taskTypeContent, isTsContent } from "@/utils/utils";
import useCommonDataStore from "@/store/common/common";
import CommonRequirementInfoVue from "@/components/requirement/comomRequirementInfo.vue";
import EditorVue from "@/views/experiment/demands/editor.vue";
import { isValidateString, openPreviewInNewWindow } from "@/utils/utils";
import AssRequiremenFileVue from '@/components/requirement/assRequiremenFile.vue';
import UploadFilesVue from "@/components/requirement/uploadFiles.vue";


let router = useRouter();
let useCommonStore = useCommonDataStore();
const loading = ref(false);
const userAuthId = ref<any>(null);//当前用户权限id
const allRequirements = ref<any>([]); // 我创建的所有已审核需求
const allFatherRequirements = ref([]);//定义我创建的所有已审核需求
const fatherRequirements = ref<any>([]);//定义我创建的所有已审核需求分类统计数据
const allEnterReuirements = ref<any>([]);// 定义我创建的所有待审核需求
const draftFiles = ref<any>([]);//该需求所有的需求草稿地址
// const baseUrl = ref(import.meta.env.VITE_SERVE);//服务器地址
const baseUrl = ref("");
const searchFormData = ref({
  projectTitle: "",
  time: ["2025-01-01", "2025-09-30"],
  userName: "",
});//搜索关键字


const dialogAvgVisible = ref(false); //控制是否开启分配任务弹窗
const dialogInfoVisible = ref(false);//查看需求弹窗控件
const clearData = ref(false);//控制是否清空子组件数据
const dialogRecordVisible = ref(false);//控制查看审核记录弹窗控件
const dialogAgainVisible = ref(false);//控制审核未通过修改需求弹窗

// * 修改需求名称
const dialogEditNameVisible = ref(false);//控制修改需求名称弹窗
const editNameFormRef = ref<FormInstance>();//修改名称表单实例
const editNameForm = reactive({
  requirementId: null as number | null,
  requirementName: ""
});
const editNameRules = reactive({
  requirementName: [{ required: true, message: "请输入需求名称", trigger: "blur" }]
});

const isRequirementID = ref(); //当前操作任务ID
const isRequirementData = ref(); //当前操作任务ID
const reviewNameOptions = ref<any>([]);//所有技术负责人选项列表
const recordData = ref<any>([]);//所有审核记录

/* 修改需求 */
const allProjectLists = ref<any>([]); // 定义所有项目名称列表
const allTypeLists = ref<any>([]); // 定义所有项目名称列表
const ruleAgainFormRef = ref<FormInstance>();// 表单实例
// const fileList = ref<any>([]);//已上传的附件
const filePaths = ref([]);//所有上传文件响应地址
// const dialogAddProVisible = ref(false);//控制添加项目名称的弹窗
// const newProjectName = ref(""); // 临时存储新项目名称

// 修改需求表单数据
const againRequirementForm = reactive<any>({
  itemRequirementId: null,
  projectId: null,
  projectType: null,
  projectTitle: "",
  onlineTime: null,
  projectMsg: "",
  filePaths: []
});
// 表单验证规则
const againRules = reactive({
  projectId: [{ required: true, message: "请选择项目名称", trigger: "blur" }],
  projectType: [{ required: true, message: "请选择需求类型", trigger: "blur" }],
  projectTitle: [{ required: true, message: "请输入需求名称", trigger: "blur" }],
  onlineTime: [{ required: true, message: "请选择预计上线时间", trigger: "blur" }],
  projectMsg: [{
    required: true,
    message: "请输入需求详情",
    trigger: "blur",
    validator: (rule: any, value: any, callback: any) => {
      // 调用自定义验证函数
      if (isValidateEditor(value)) {
        callback(new Error("需求详情不能为空格或空行！"));
      } else {
        callback();
      }
    }
  }],
});


// * 关闭/撤回需求
const dialogReasonMsgVisible = ref(false);// 关闭/撤回需求原因弹窗
const reasonMsg = ref("");// 关闭/撤回需求原因

// * 修改文件
const openModal = ref(false);
const newAssFilesList = ref<any>([]);// 新关联的文件

// * 上传文件初始配置
const initConfig = {
  tipText: "",// 提示文本
  type: "primary",// 按钮类型
  plain: true,// 按钮样式
  btnText: "上传",// 按钮文本
  fileUrl: "/file/upload_file",// 上传地址
  fileType: "draftPath",// 上传类型
  fileTypeId: "5",// 上传类型id
};
const resetFiles = ref(false);// 是否清除已上传文件列表

// 列表容器 refs 与滚动监听
const listContainerRefs = reactive<any>({});
const setListContainerRef = (el: any, status: number) => {
  if (!el) return;
  listContainerRefs[status] = el;
  // 绑定一次滚动监听
  if (!el._hasScrollListener) {
    el.addEventListener('scroll', () => handleListScroll(status));
    el._hasScrollListener = true;
  }
};

const isNearBottom = (el: HTMLElement, threshold = 30) => {
  const { scrollTop, scrollHeight, clientHeight } = el;
  return scrollTop + clientHeight >= scrollHeight - threshold;
};


// 获取公共数据
const getCommon = async (index: any) => {
  await useCommonStore.getAllReqTypesList();
  await useCommonStore.getAllProjectList();
  await useCommonStore.getAllRoleUsersList(index);

  allProjectLists.value = useCommonStore.$state.allProjectList;
  allTypeLists.value = useCommonStore.$state.allReqTypesList;
};

// TODO 点击创建任务
const createRequirementClick = () => {
  router.push({
    path: "/requirement/create",
  });
};

// TODO 获取技术负责人下拉列表
const getReviewNameOptions = async () => {
  await useCommonStore.getAllRoleUsersList("555|999");
  reviewNameOptions.value = useCommonStore.$state.allRoleUserList;
};


// 每个状态的分页与加载状态
const statusPage = reactive<any>({});
for (let s = 1; s <= 9; s++) {
  statusPage[s] = { page: 1, pageSize: 10, loading: false, finished: false };
}

// 基于 ID 去重追加
const mergeRequirements = (target: any[], incoming: any[]) => {
  const exist = new Set(target.map((i: any) => i.ID));
  incoming.forEach((i: any) => {
    if (!exist.has(i.ID)) target.push(i);
  });
};

const extractRequirements = (payload: any) => {
  if (!payload) return [];
  if (Array.isArray(payload)) return payload;
  return payload.requirements || payload.list || payload.rows || payload.items || [];
};

// TODO 获取我创建的需求数据
const getAllRequirements = async () => {
  loading.value = true;
  userAuthId.value = localStorage.getItem("authorityId");

  // 重置分页
  for (let s = 1; s <= 9; s++) {
    statusPage[s].page = 1;
    statusPage[s].finished = false;
  }

  const begin = searchFormData.value.time === null ? "" : (searchFormData.value.time[0] || "");
  const end = searchFormData.value.time === null ? "" : (searchFormData.value.time[1] || "");
  const requests = Array.from({ length: 9 }, (_, idx) => idx + 1).map(async (status) => {
    const { data } = await GetCreateRequirement({
      projectTitle: searchFormData.value.projectTitle,
      beginTime: begin,
      endTime: end,
      requirementStatus: status,
      page: statusPage[status].page,
      pageSize: statusPage[status].pageSize,
      keyword: searchFormData.value.userName || ""
    });
    return data;
  });

  try {
    const results = await Promise.all(requests);
    // 合并所有状态的需求
    allRequirements.value = [];
    results.forEach((res, idx) => {
      if (res.code === 200 && res.data) {
        const list = extractRequirements(res.data);
        mergeRequirements(allRequirements.value, list);
        if (list.length < statusPage[idx + 1].pageSize) statusPage[idx + 1].finished = true;
      }
    });

    // 未生效且未关闭
    allEnterReuirements.value = allRequirements.value.filter((item: any) => item.requirementFatherStatus !== 9).filter((item: any) => item.requirementBossName == "");

    // 已审核或已关闭
    allFatherRequirements.value = allRequirements.value.filter((item: any) =>
      !allEnterReuirements.value.some((enterItem: any) => enterItem.ID === item.ID)
    );

    if (allFatherRequirements.value.length > 0) {
      const statusCount = {} as any;
      allFatherRequirements.value.forEach((item: any) => {
        let fStatus = item.requirementFatherStatus;
        if (statusCount[fStatus]) {
          statusCount[fStatus].total++;
          if (!statusCount[fStatus].requirements.includes(item.ID)) {
            statusCount[fStatus].requirements.push(item);
          }
        } else {
          statusCount[fStatus] = {
            status: Number(fStatus),
            total: 1,
            requirements: [item]
          }
        }
      });
      fatherRequirements.value = Object.values(statusCount);
    } else {
      fatherRequirements.value = [];
    }

    // 动态添加样式
    const cardLayoutBox = document.getElementById("cardLayoutBox");
    let enterLength = allEnterReuirements.value.length == 0 ? 0 : 1;
    let fatherLength = fatherRequirements.value.length;

    if ((enterLength + fatherLength) % 3 == 2) {
      cardLayoutBox?.style.setProperty("justify-content", "flex-start");
    } else {
      cardLayoutBox?.style.setProperty("justify-content", "space-between");
    };
  } catch (e: any) {
    ElMessage.error(e?.msg || "获取需求失败");
  } finally {
    loading.value = false;
  }
};

// 懒加载：按状态加载更多
const loadMoreByStatus = async (status: number) => {
  const state = statusPage[status];
  if (state.loading || state.finished) return;
  state.loading = true;

  const begin = searchFormData.value.time === null ? "" : (searchFormData.value.time[0] || "");
  const end = searchFormData.value.time === null ? "" : (searchFormData.value.time[1] || "");
  state.page += 1;
  try {
    const { data } = await GetCreateRequirement({
      projectTitle: searchFormData.value.projectTitle,
      beginTime: begin,
      endTime: end,
      requirementStatus: status,
      page: state.page,
      pageSize: state.pageSize,
      keyword: searchFormData.value.userName || ""
    });
    if (data.code === 200 && data.data) {
      const list = extractRequirements(data.data);
      if (list.length < state.pageSize) state.finished = true;
      mergeRequirements(allRequirements.value, list);

      // 重新分组
      allEnterReuirements.value = allRequirements.value.filter((item: any) => item.requirementFatherStatus !== 9).filter((item: any) => item.requirementBossName == "");
      allFatherRequirements.value = allRequirements.value.filter((item: any) =>
        !allEnterReuirements.value.some((enterItem: any) => enterItem.ID === item.ID)
      );

      if (allFatherRequirements.value.length > 0) {
        const statusCount = {} as any;
        allFatherRequirements.value.forEach((item: any) => {
          let fStatus = item.requirementFatherStatus;
          if (statusCount[fStatus]) {
            statusCount[fStatus].total++;
            if (!statusCount[fStatus].requirements.includes(item.ID)) {
              statusCount[fStatus].requirements.push(item);
            }
          } else {
            statusCount[fStatus] = {
              status: Number(fStatus),
              total: 1,
              requirements: [item]
            }
          }
        });
        fatherRequirements.value = Object.values(statusCount);
      } else {
        fatherRequirements.value = [];
      }
    } else {
      state.finished = true;
    }
  } finally {
    state.loading = false;
  }
};

// 滚动触底自动加载
const handleListScroll = (status: number) => {
  const el = listContainerRefs[status] as HTMLElement;
  if (!el) return;
  if (isNearBottom(el)) {
    loadMoreByStatus(status);
  }
};

// 接收子组件中上传的文件地址
const handleUpdateFilePaths = (value: any) => {
  filePaths.value = value;
};


// TODO 查看需求审核记录
const handleEnterMsg = async (id: number) => {
  dialogRecordVisible.value = true;

  const { data } = await GetRequirementEnterMsg(id);

  if (data.code === 200) {
    // 审核记录
    recordData.value = data.data;
  } else {
    ElMessage.error(data.msg);
    return;
  }
};

// TODO 处理每次审核的需求草稿
const handleRecordFiles = (val: string) => {
  // 需求草稿地址
  if (val !== "") {
    draftFiles.value = val.split("|").map((url: string) => {
      return handleFileName(url);
    });
  }
  return draftFiles.value;
};

// TODO 关闭主需求
const closeFatherStatus = async (id: number) => {
  await ElMessageBox.confirm("确认关闭该需求吗？", {
    cancelButtonText: "取消",
    confirmButtonText: "确认",
  }).then(async () => {
    const { data } = await putCloseRequirementStatus({
      requirementId: id,
      closeMsg: reasonMsg.value
    });
    if (data.code !== 200) {
      ElMessage.warning(data.msg);
      return;
    } else {
      loading.value = true;
      await getAllRequirements();
      loading.value = false;
    }
  })
    .catch(() => {
      return new Promise(() => { });
    });
};


// TODO 查看需求
const handleRowClick = async (id: number) => {
  dialogInfoVisible.value = true;
  isRequirementID.value = id;
};

const handleInitAgain = () => {
  againRequirementForm.itemRequirementId = null;
  againRequirementForm.projectId = null;
  againRequirementForm.projectType = null;
  againRequirementForm.projectTitle = "";
  againRequirementForm.onlineTime = null;
  againRequirementForm.projectMsg = "";
  againRequirementForm.filePaths = [];
};


// TODO 未生效操作
const handleCommand = async (val: any) => {
  isRequirementData.value = val.data;
  isRequirementID.value = val.id;
  switch (val.type) {
    case 0:
      // 关闭需求
      // await closeFatherStatus(val.id);
      dialogReasonMsgVisible.value = true;
      break;
    case 1:
      await handleUrged(val.id);
      break;
    case 2:
      // 查询需求，获取需求原始数据
      try {
        const { data } = await PostRequirement({
          id: val.id,
        });

        if (data.code === 200) {
          // 需求草稿地址
          if (data.data.itemRequirementWorldDraft !== "" || data.data.itemRequirementWorldDraft.includes("|")) {
            if (data.data.itemRequirementWorldDraft.includes("|")) {
              againRequirementForm.filePaths = data.data.itemRequirementWorldDraft.split("|").map((url: string) => {
                return handleFileName(url);
              });
            } else {
              againRequirementForm.filePaths[0] = handleFileName(data.data.itemRequirementWorldDraft);
            }
          } else {
            againRequirementForm.filePaths = [];
          };

          againRequirementForm.itemRequirementId = val.id;
          againRequirementForm.projectId = data.data.itemItemId;
          againRequirementForm.projectType = data.data.itemRequirementTypeId;
          againRequirementForm.projectTitle = data.data.requirementName.substring((data.data.requirementName.lastIndexOf('】') + 1));
          againRequirementForm.onlineTime = data.data.onlineTime;
          againRequirementForm.projectMsg = data.data.requirementContent;

          dialogAgainVisible.value = true;

        } else {
          ElMessage.error(data.msg);
          throw console.error(data.msg);
        };
      } catch (error) {
      }
      break;
    case 3:
      // 查看审核记录
      await handleEnterMsg(val.id);
      break;
    case 4:
      // 修改需求名称
      await handleEditName(val.id, val.data);
      break;
    default:
      // 关闭需求
      // await closeFatherStatus(val.id);
      dialogReasonMsgVisible.value = true;
      break;
  };
};

//  选择技术负责人
const handleReviewCommand = async (val: any) => {

  await ElMessageBox.confirm(`确认技术负责人为：${val.nickName}吗？`, {
    confirmButtonText: "确认",
  }).catch(() => {
    return new Promise(() => { });
  });

  const { data } = await PutUpdateBossName(val);
  if (data.code === 200) {
    ElMessage.success(data.msg);
    await getAllRequirements();
  } else {
    ElNotification({
      title: '',
      message: data.msg,
      type: 'warning',
      duration: 3000
    });
    return;
  }
}

// 催促审核需求
const handleUrged = async (id: number) => {
  const { data } = await GetUrgedRequriement(id);
  if (data.code === 200) {
    ElMessage.success("已催促");
  } else {
    ElMessage.error(data.msg);
  }
};

// 提取第二个】后面的内容
const extractNameAfterSecondBracket = (fullName: string): string => {
  const brackets = fullName.split('】');
  if (brackets.length >= 3) {
    // 如果有2个或更多】符号，返回第二个】后面的内容
    return brackets[2];
  } else if (brackets.length === 2) {
    // 如果只有1个】符号，返回】后面的内容
    return brackets[1];
  } else {
    // 如果没有】符号，返回原名称
    return fullName;
  }
};

// TODO 修改需求名称
const handleEditName = async (id: number, data: any) => {
  editNameForm.requirementId = id;
  editNameForm.requirementName = extractNameAfterSecondBracket(data.requirementName);
  dialogEditNameVisible.value = true;
};

// TODO 关闭修改需求名称弹窗
const handleCloseEditNameDialog = () => {
  editNameForm.requirementId = null;
  editNameForm.requirementName = "";
  dialogEditNameVisible.value = false;
};

// TODO 提交修改需求名称
const handleSubmitEditName = async () => {
  if (!editNameFormRef.value) return;
  
  await editNameFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        // 使用专门的修改需求名称接口
        const { data } = await PostUpdateRequirementName({
          itemRequirementId: editNameForm.requirementId,
          itemRequirementName: editNameForm.requirementName
        });
        
        if (data.code === 200) {
          ElMessage.success("需求名称修改成功");
          handleCloseEditNameDialog();
          await getAllRequirements();
        } else {
          ElMessage.error(data.msg);
        }
      } catch (error) {
        ElMessage.error("修改失败，请稍后重试");
      }
    } else {
      console.error("表单验证失败", fields);
    }
  });
};


// TODO 关闭弹窗
const handleCloseDiglog = () => {
  // isRequirementID.value = null;
  clearData.value = true;
  dialogAvgVisible.value = false;

  dialogRecordVisible.value = false;
  recordData.value = [];
};

const handleDelFile = (val: any) => {
  const index = againRequirementForm.filePaths.findIndex((item: any) => item.url === val);
  if (index !== -1) {
    againRequirementForm.filePaths.splice(index, 1);
  }
};

// TODO　关联文件
// 监听子组件的事件函数，并接收子组件中选中的文件
const handleAddFiles = (data: any) => {
  newAssFilesList.value = newAssFilesList.value.concat(data);
};
// 删除关联文件
const handleDelAssFile = (row: any) => {
  newAssFilesList.value.splice(newAssFilesList.value.indexOf(row), 1);
};

// TODO 取消修改需求
const handleColseAgain = async () => {
  await handleInitAgain();

  // fileList.value = [];
  filePaths.value = [];
  newAssFilesList.value = [];

  resetFiles.value = true;
  setTimeout(() => {
    resetFiles.value = false;
  }, 100)


  dialogAgainVisible.value = false;

};

// 富文本数据更新
const updateModelValue = (newContent: any) => {
  againRequirementForm.projectMsg = newContent;

};

// TODO 确定修改需求
const handleAgainRequirement = async (formEl: FormInstance | undefined) => {
  // 确定时监听富文本内容
  const againBtn = document.querySelector("#againBtn");
  againBtn?.addEventListener("update:modelValue", updateModelValue);

  if ((filePaths.value.length + againRequirementForm.filePaths.length + newAssFilesList.value.length) == 0) {
    ElMessage.warning("至少上传一个附件！");
    return;
  } else {

    if (!formEl) {
      console.error("表单验证失败，请将内容填写完整:");
      return;
    };
    const validatePromise = formEl.validate();
    try {
      await validatePromise;
      // 表单校验通过

      // 处理需求草稿文件
      let files = [];
      // againRequirementForm.filePaths.map((item: any) => {
      //   files.unshift(item);
      // });

      files = filePaths.value.map((path: any) => {
        return handleFileName(path).url;
      });

      let aginData = [];
      aginData = againRequirementForm.filePaths.map((item: any) => item.url);

      files.unshift(...aginData.reverse());
      files.unshift(...newAssFilesList.value.reverse());

      await ElMessageBox.confirm("确定要修改需求吗？", "确定", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      }).then(async () => {
        //* 处理请求参数
        const reqData = {
          itemRequirementId: againRequirementForm.itemRequirementId,
          projectId: againRequirementForm.projectId,
          projectType: againRequirementForm.projectType,
          projectTitle: againRequirementForm.projectTitle,
          itemRequirementBossNameUUID: againRequirementForm.itemRequirementBossNameUUID,
          onlineTime: againRequirementForm.onlineTime,
          projectMsg: againRequirementForm.projectMsg,
          filePaths: files
          // filePaths: files.map((item: any) => item.url)
        };

        const { data } = await PostAgainRequirement(reqData);
        if (data.code === 200) {
          ElMessage.success(data.msg);
          dialogAgainVisible.value = false;

          againRequirementForm.itemRequirementId = null;
          againRequirementForm.projectId = null;
          againRequirementForm.projectType = null;
          againRequirementForm.projectTitle = "";
          againRequirementForm.onlineTime = null;
          againRequirementForm.projectMsg = "";
          againRequirementForm.filePaths = [];

          // fileList.value = [];
          filePaths.value = [];


          loading.value = true;
          await getAllRequirements();
          loading.value = false;

        } else {
          ElMessage.error(data.msg);
        }

      }).catch(() => {
        dialogAgainVisible.value = false;
        againRequirementForm.itemRequirementId = null;
        againRequirementForm.projectId = null;
        againRequirementForm.projectType = null;
        againRequirementForm.projectTitle = "";
        againRequirementForm.onlineTime = null;
        againRequirementForm.projectMsg = "";
        againRequirementForm.filePaths = [];

        // fileList.value = [];
        filePaths.value = [];
      });

    } catch (error) {
      // 表单验证失败
      loading.value = false;
      console.error("表单验证失败，请将内容填写完整", error);
      return;
    }
  }
};

// TODO 取消关闭/撤回需求弹窗
const handleCloseReasonMsgDialog = () => {
  reasonMsg.value = "";
  dialogReasonMsgVisible.value = false;
};

// TODO 提交关闭/撤回需求原因
const handleSubmitReasonMsg = async () => {
  if (isValidateString(reasonMsg.value)) {
    ElMessage.warning("必填，且不能为空或空格。");
    return;
  } else {
    const reasonMsgForm = {
      requirementId: isRequirementID.value,
      closeMsg: reasonMsg.value.trim()
    };

    if (isRequirementData.value.requirementFatherStatus == 9) {
      // 撤回需求
      const { data } = await PutReturnCloseFatherRequirementStatus(reasonMsgForm);
      if (data.code !== 200) {
        ElMessage.error(data.msg);
        dialogReasonMsgVisible.value = false;
        return;
      } else {
        handleCloseReasonMsgDialog();
        // await closeFatherStatus(isRequirementID.value);
        await getAllRequirements();
      }
    } else {
      // 关闭需求
      const { data } = await putCloseRequirementStatus(reasonMsgForm);
      if (data.code !== 200) {
        ElMessage.error(data.msg);
        dialogReasonMsgVisible.value = false;
        return;
      } else {
        handleCloseReasonMsgDialog();
        await getAllRequirements();
      }
    }
  }
};

// TODO 预览文件
const handlePreviewDocument = (url: string) => {
  let file = handleFileName(url);
  if (file.url.includes('Img') || file.url.includes('.pdf') || file.url.includes('.txt') || file.url.includes('.png') || file.url.includes('.gif') || file.url.includes('.jpge')) {
    window.open(`${'http://192.168.0.91:19081' + url}`, '_blank');
    return;
  } else {
    openPreviewInNewWindow(url, file.fileName);
  }
};

onMounted(async () => {
  await useCommonStore.getAllRoleUsersList("");
  await getCommon(333);
  getReviewNameOptions();
  getAllRequirements();
});
</script>

<style lang="scss" scoped>
.content-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 1160px;

  // TODO 搜索区域
  .search-wrap {
    width: 100%;
    //height: 40px;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;

    .search-wrap-item {
      margin-right: 10px;
      margin-bottom: 0;
      min-width: 200px;
      font-weight: bold;
      font-size: 24px;
      font-family: Arial, Helvetica, sans-serif;
      color: #000;
    }
  }

  ;

  // 需求列表区域
  .card-layout-box {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    //flex-wrap: wrap;  换行布局
    overflow-y: auto;
    border-radius: 6px;

    // 无数据时显示
    .card-not-requirement {
      color: #909399;
      margin: auto;
    }

    .card-box {
      //width: 32.6%;
      min-width: 380px;
      //height: 360px;
      height: 97%;
      border: 1px solid #d0d0d0;
      border-radius: 6px 6px 0 0;
      margin: 0 0.3% 1% 0.3%;
      display: flex;
      flex-direction: column;
      background: #fff;

      // 列表标题
      .card-header-box {
        width: 100%;
        height: 40px;
        padding: 0 10px;
        line-height: 40px;
        font-size: 14px;
        font-family: Helvetica, Arial, sans-serif;
        //color: white;
        border-radius: 6px 6px 0 0;
        border-bottom: 1px solid #dbdfe0;
        color: #bac0cb;

        span {
          color: #fff;
          font-size: 14px;
        }
      }

      // 列表盒子
      .card-list-box {
        width: 100%;
        // height: calc(100% - 40px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: auto;

        .list-footer {
          width: 100%;
          text-align: center;
          color: #909399;
          font-size: 12px;
          padding: 10px 0 14px;
        }

        .card-list {
          width: 100%;
          // height: 100%;
          flex: 1 1 auto;
          font-size: 14px;

          .card-list-item {
            width: 100%;
            min-height: 71px;
            //height: 71px;
            padding: 5px 10px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-bottom: 1px solid #ccc;

            // 操作
            .operate-box {
              width: 20px;
              height: 100%;
              display: flex;
              align-items: center;

            }

            //
            .card-list-left {
              width: calc(100% - 20px);
              display: flex;
              flex-direction: column;
              flex-wrap: nowrap;
              position: relative;

              .icon-img {
                position: absolute;
                right: -25px;
                bottom: 0;
              }

              // 需求标题
              .card-header-title-box {
                font-size: 15px;
                width: 100%;
                cursor: pointer;
                line-height: 18px;

                .el-text {
                  width: 100%;
                }

                .el-text:hover {
                  color: #409EFF;
                }
              }

              // 附加信息样式
              .card-list {
                width: 100%;
                display: flex;
                justify-content: space-between;
                flex-direction: row;
                white-space: nowrap;
                padding: 0;
                //font-size: 0.7rem;
                font-size: 12px;
                color: #999;

                .card-list-small-item {
                  margin: 0 10px 0 0;
                }

                .item-status {
                  width: 150px;
                  font-size: 12px;
                }

                .boss-name {
                  float: left;
                  width: 130px;
                  font-size: 12px;
                }

                .test-list {
                  width: 180px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 12px;
                }

                .begin-time {
                  width: 110px;
                  font-size: 12px;
                  position: relative;
                }

                .operate-box {
                  width: 20px;
                  text-align: right;
                }
              }
            }
          }
        }
      }
    }

    /* 当屏幕宽度超过 1620px 时，调整 .card-box 的宽度 */
    @media (min-width: 1921px) {
      .card-box {
        width: 24.2%;
        /* 新的宽度 */
      }
    }

    /* 当屏幕宽度超过 2680px 时，调整 .card-box 的宽度 */
    @media (min-width: 2681px) {
      .card-box {
        width: 19.32%;
        /* 新的宽度 */
      }
    }

    .card-header-title-box:hover {
      color: #409EFF;
    }

    .card-list-item:hover {
      background-color: rgb(216.8, 235.6, 255);
    }
  }

  ;

  // 审核需求
  .record-title {
    display: flex;
    flex-direction: row;
    padding: 5px 10px;
    margin-bottom: 10px;
    background-color: #f0f0f0;
    border-radius: 2px;

    p {
      margin-right: 20px;
    }
  }

  // 需求草稿
  .info-file-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin: 10px 0 0;

    .info-content-title {
      width: 100px;
      padding: 0 10px;
    }

    .info-file-ul {
      width: calc(100% - 70px);
      text-align: left;
      display: flex;
      flex-direction: column;

      .info-file-item {
        width: 100%;
        margin-right: 10px;
      }

      .info-file-icon {
        color: #2d8cf0;
        margin-left: 5px;
      }
    }
  }

  // TODO 分配需求弹窗
  .dialog-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .dialog-form-box {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin-bottom: 30px;

      .el-form-item {
        margin: 0 10px;
      }
    }

    .dialog-footer {
      text-align: right;
    }
  }

  // 修改需求弹窗
  .again-dialog {
    .create-form {
      width: 100%;
      overflow-y: auto;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .add-icon {
        color: #dcdfe6;
        cursor: pointer;
        margin-left: 5px;
      }

      .add-icon:hover {
        color: #409eff;
      }

      .is-check-role {
        background-color: #409eff;
      }

      .file-box {
        width: 100%;
      }

      .upload-box {
        width: 100%;
        // height: 60px;
        // .el-form-item__content {
        //   align-content: flex-start;
        //   background-color: red;
        // }
      }
    }

    .create-form>*:not(.create-button) {
      order: 1;
    }

    .create-button {
      order: 2;
      margin-left: auto;
      margin-right: 20px;
      margin-top: 20px;
    }
  }

  .dialog-footer {
    width: 100%;
    text-align: right;
  }

  .red-text {
    color: red;
  }

  .red-bj {
    background-color: #fff1f0;
  }

  .card-finished {
    color: #999;
    text-decoration: line-through;
  }
}
</style>
